<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.grandfather{
			width:300px;
			height:300px;
			background-color:green;
			position:relative;
		}

		.father{
			width:200px;
			height:200px;
			background-color:gold;
		}

		.son{
			width:100px;
			height:100px;
			background-color:red;
			position:absolute;
			left:0;
			top:400px;
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			$('body').click(function() {
				alert(4);
			});

			$('.grandfather').click(function() {
				alert(3);
			});


			
			$('.father').click(function() {
				alert(2);
			});
			

			$('.son').click(function(ev) {
				alert(1);

				//ev.stopPropagation();
				//console.log(ev);
				//alert(ev.clientX);

				return false;

			});



			$(document).contextmenu(function(event) {
    			//event.preventDefault();
    			return false;
			});



		});


	</script>
</head>
<body>
	<div class="grandfather">
		<div class="father">
			<div class="son"></div>
		</div>
	</div>
</body>
</html>